<template>
  <GGDialog title="回复评论" :visible.sync="visible" width="450px">
    <el-form
      label-width="80px"
      :model="replyFormData"
      :rules="replyFormRules"
      ref="replyFormRef"
    >
      <el-form-item label="回复内容" prop="replyContent">
        <el-input
          type="textarea"
          v-model="replyFormData.replyContent"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </template>
  </GGDialog>
</template>

<script>
import { replyComment } from "@/api/mall/product/comment";

export default {
  name: "ReplyForm",
  data() {
    return {
      visible: false,
      // 表单数据
      replyFormData: {
        id: "",
        replyContent: "",
      },
      // 表单校验规则
      replyFormRules: {
        replyContent: [
          { required: true, message: "请输入回复内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open() {
      this.replyFormData = {
        id: "",
        replyContent: "",
      };
      this.visible = true;
      this.$refs.replyFormRef?.clearValidate();
    },
    close() {
      this.visible = false;
    },
    submit() {
      this.$refs.replyFormRef.validate(async (valid) => {
        if (valid) {
          // 发送请求，完成功能
          await replyComment(this.replyFormData);
          this.$message({
            type: "success",
            message: "回复评论成功",
          });
          this.close();
          this.$emit("success");
        }
      });
    },
  },
};
</script>

<style></style>
